<!doctype html>
<html style="height:100%">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../ui/layui/css/layui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont1.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont2.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont3.css" />
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			
			body {
				font-family: STHeiti, "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
			}
			
			.center {
				position: relative;
				top: 50%;
				/*left: 50%;*/
				text-align: center;
				/*background:#393;
				color:#fff;*/
				transform: translate(-50%, -50%);
			}
			
			.paragraph {
				text-indent: 2em;
				letter-spacing: 3px;
				font-size: 19px;
				color: white;
				line-height: 25px;
				width: 100%;
			}
			
			.div5::-webkit-scrollbar {
				width: 10px;
				height: 10px;
				background-color: #146d80;
			}
			/*定义滚动条轨道 内阴影+圆角*/
			
			.div5::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				background-color: #146d80;
			}
			/*定义滑块 内阴影+圆角*/
			
			.div5::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
				background-color: white;
			}
			
			.picture {
				text-align: center;
				width: 100%;
			}
			
			.picture img {
				max-width: 100%;
			}
			
			.videothumb {
				text-align: center;
				width: 100%;
			}
			
			.videothumb video {
				max-width: 100%;
			}
			
			.topDiv {
				height: 24%;
				background: #58B0BA;
				padding: 22px;
				border-radius: 10px;
				margin: 0 1%;
				background: -webkit-linear-gradient(#0078bd, #08bdeb);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(#0078bd, #08bdeb);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(#0078bd, #08bdeb);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(#0078bd, #08bdeb);
				/* 标准的语法 */
			}
			
			.div1 {
				/*background: red;*/
				height: 100%;
				width: 100%;
				/*display: table-cell;
				vertical-align: middle;
				text-align: center;
				border: 1px solid #000;*/
			}
			
			.bottomDiv {
				height: 75%;
				width: 100%;
				float: left;
			}
			
			.div2 {
				height: 100%;
				width: 28%;
				background: #25747d;
				float: left;
				padding: 20px;
				border-radius: 10px;
				margin: 0 1% 0 1%;
				background: -webkit-linear-gradient(#08B9EA, #08B9EA);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(#08B9EA, #08B9EA);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(#08B9EA, #08B9EA);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(#08B9EA, #08B9EA);
				/* 标准的语法 */
			}
			
			.div3 {
				height: 100%;
				width: 68%;
				/*background: #f2f2f2;*/
				float: left;
				padding: 20px;
				border-radius: 10px;
				margin: 0 1% 0 1%;
			}
			
			.div4 {
				/*background: red;*/
				height: 93%;
				width: 100%;
				overflow: auto;
			}
			
			.div5 {
				/*background: red;*/
				height: 100%;
				width: 100%;
			}
			
			.div6 {
				background: transparent;
				height: 50px;
				width: 100%;
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 13px;
				font-size: 25px;
				text-align: center;
				margin-bottom: 0px;
				color: white;
			}
			
			.div7 {
				background: transparent;
				width: 100%;
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 20px;
				font-size: 20px;
			}
			
			.div1Img {
				height: 80px;
				width: 150px;
				padding-top: 20px;
			}
			
			.pSty {
				color: white;
				font-size: 20px;
				margin-left: 20px;
				margin-top: 20px;
			}
			/*.mui-table-view li:first-child {
				background: #F0981C;
			}*/
			
			.bg1 {
				padding-top: 12px;
				color: white;
				background: #0986a0;
				height: 50px;
				font-size: 20px;
				padding-right: 20px;
			}
			
			.bg2 {
				padding-top: 12px;
				color: #e0ff00;
				background: #086174;
				height: 50px;
				font-size: 20px;
				padding-right: 20px;
			}
			
			.layui-laypage {
				width: 100% !important;
				margin: 0px 0;
			}
			
			.layui-laypage>a:first-child,
			.layui-laypage>a:first-child em {
				text-align: center;
				border-radius: 4px;
				margin-left: 20% !important;
			}
			
			.layui-laypage>a:last-child,
			.layui-laypage>a:last-child em {
				text-align: center;
				float: right;
				border-radius: 4px;
				margin-right: 20% !important;
			}
			
			.mui-table-view:before {
				height: 0
			}
			
			.mui-table-view:after {
				height: 0
			}
			
			.mui-table-view-cell:after {
				height: 0px!important;
			}
			
			.aligncenter {
				clear: both;
				display: block;
				margin: auto;
			}
			
			.alignleft {
				display: inline;
				float: left;
				margin-top: 4%;
			}
			
			.alignleft1 {
				display: inline;
				float: left;
				margin-top: 5%;
				margin-left: 20px
			}
			
			.alignright {
				display: inline;
				float: right;
				margin-top: 8%;
				margin-right: 50px;
			}
			
			.fontContent {
				font-family: iconfont1;
			}
			
			.fontTitle {
				font-family: iconfont3;
				font-weight: 900;
			}
			
			.fontTitle1 {
				font-family: iconfont3;
				font-weight: 900;
			}
			
			.outer {
				width: 60%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			/*video::-webkit-media-controls-fullscreen-button {
            display: none;
        }*/
		</style>
	</head>

	<body style="height: 100%;width: 100%;">
		<div class="mui-content" v-cloak style="height: 100%;background: linear-gradient(to bottom, #41bc10, #ffc048);" id="classCardMsg">
			<div v-cloak style="height: 12%;width: 100%;">
				<!--头像、学校、年级、班级信息-->
				<div class="" style="float:left;height: 100%;width: 60%;">
					<img v-if="cardMsgList1.chname" class="alignleft" src="../../img/tianqi1.jpg" style="height: 70px;width: 70px;border-radius: 50%;object-fit: cover;margin-left: 7%;float: left;">
					<div v-if="cardMsgList1.chname" class="alignleft1" style="float: left;">
						<p class="mui-pull-left fontTitle1" style="font-size: 50px;color: #fff;font-weight: 900;">{{cardMsgList1.schname}} {{cardMsgList1.gradename}} {{cardMsgList1.classname}}</p>
					</div>
				</div>
				<!--时间-->
				<div class="" style="float:left;height: 100%;width: 40%;">
					<p class="alignright fontTitle" style="font-size: 24px;color: #fff;height: 100%;">{{timeModel.yearStr}} {{timeModel.weekStr}} {{timeModel.hoursStr}}</p>
				</div>
			</div>
			<div style="height: 85%;width: 100%;">
				<!--<div class="" style="padding: 20px 20px 20px 20px;width: 100%;height: 100%;">-->
				<div class="" style="padding: 20px 20px 20px 20px;width: 100%;height: 100%;">
					<div class="" style="float:left;height: 100%;width: 3%;"></div>
					<!--<div class="" style="float:left;height: 100%;width: 94%;background: #20d0b0;border-radius: 12px;">-->
					<div class="" style="float:left;height: 100%;width: 94%;background: #146d80;border-radius: 12px;">
						<div class="" style="height: 10%;width: 100%;">
							<div style="text-align: center;height: 8%;width: 100%;">
								<img src="../../img/page1/biaoti.png" style="margin: -22px 0 0;width: 300px;" />
							</div>
							<div class="fontTitle" style="height: 6%;text-align: center;width: 100%;color: white;font-size: 25px;margin-top: -5px;">{{cardMsgList1.chname}}</div>
						</div>
						<div class="" style="height: 88%;width: 100%;">
							<div class="" style="float:left;height: 100%;width: 2%;"></div>
							<div class="" style="float:left;height: 100%;width: 30%;background: #0986a0;border-radius: 12px;">
								<!--<div class="" style="float:left;height: 100%;width: 30%;border-radius: 12px;">-->
								<div class="div4">
									<ul class="mui-table-view" v-if="cardMsgList1.newslist">
										<li :class="(currentModel.newsid==detailModel.newsid)?'bg2':'bg1'" @click="clickLi(detailModel)" class="mui-table-view-cell fontTitle" v-for="(detailModel,index) in cardMsgList1.newslist">
											<!--<a class="mui-navigate-right">
												{{detailModel.topic}}({{detailModel.rectime}})
											</a>-->
											<div class="mui-navigate-right">
												<div class="outer" style="float:left;width: 60%;">{{detailModel.topic}}</div>
												<div style="float:right;padding-right: 10px;font-size: 20px;">({{detailModel.rectime}})</div>
											</div>
										</li>
									</ul>
								</div>
								<!--<div id="demo1" style="position: relative;bottom: 10px;width: 30%;margin-left: 30px;"></div>-->
								<div id="demo1" style="width: 100%;"></div>
								<div id="demo2" style="text-align: center;margin-top: -30px;color: white;">第{{pageNum}}/{{totalPage}}页</div>
							</div>
							<div class="" style="float:left;height: 100%;width: 2%;"></div>
							<div class="" style="float:left;height: 100%;width: 64%;">
								<div class="div5" style="overflow-x: hidden;overflow-y: scroll;" v-if="currentModel.content">
									<p class="div6 fontTitle">{{currentModel.topic}}</p>
									<div class="div7 fontContent" v-html="currentModel.content" style=""></div>
								</div>
							</div>
							<div class="" style="float:left;height: 100%;width: 2%;"></div>
						</div>
					</div>
					<div class="" style="float:left;height: 100%;width: 3%;"></div>
				</div>
			</div>
			<div style="height: 3%;width: 100%;"></div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../ui/layui/layui.js"></script>
		<script src="../../js/jquery-1.8.3.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<script type="text/javascript" src="../../js/json2xml.js"></script>
		<script type="text/javascript" src="../../js/xml2json.js"></script>

		<script src='../../js/utils/vue.min.js'></script>
		<script src="../../js/storageKeyName.js"></script>
		<script src="../../js/utils/store.js"></script>
		<script src="../../js/utils/utils.js"></script>
		<script src="../../js/utils/events.js"></script>
		<script src="../../js/lib/vconsole/vconsole.min.js"></script>
		<script src="../../js/publicProtocol.js"></script>
		<script type="text/javascript">
			mui.init();

			var curPage;
			var canInit = true;
			//3分钟后返回上一级页面
			//			setTimeout(function(){
			//				window.location.href=document.referrer;
			//			},3*60*1000);

			window.onload = function() {
				curPage = utils.getDataFromUrl(window.location.href);
				console.log('curPage:' + JSON.stringify(curPage));
				//				classCardMsg.currentModel = curPage;
				$('.div7').height($('.div3').height() - 70);
				var publicPar = store.get(window.storageKeyName.PUBLICPARAMETER);
				var tempUrl = 'http://wthrcdn.etouch.cn/WeatherApi?city=' + publicPar.cityName;
				$.ajax({
					url: tempUrl,
					data: "",
					dataType: "xml",
					success: function(data) {
						var json_obj = $.xml2json(data);
						// console.log('json_obj:' + JSON.stringify(json_obj));
						classCardMsg.weatherModel = json_obj;
					}
				});
				setInterval("getTime()", 1000);
				getlist(2, curPage.chncode, classCardMsg.pageLimit, curPage.chncode);
			}
			//flag,文章种类，0文章列表,1带图片的文章列表,2带详情
			//chncode,栏目代码，后台栏目定义的代码
			//pageSize,每页条数
			function getlist(flag, chncode, pageSize, tempFlag) {
				var publicPar = store.get(window.storageKeyName.PUBLICPARAMETER);
				var personal = store.get(window.storageKeyName.PERSONALINFO);
				var newsType;
				if(publicPar.blandlv == 0) { //0是班级班牌
					if(tempFlag == 1 || tempFlag == 2 || tempFlag == 3 || tempFlag == 6) {
						newsType = 0;
					} else {
						newsType = 2;
					}
				} else if(publicPar.blandlv == 1) { //1是年级牌
					if(tempFlag == 1 || tempFlag == 2 || tempFlag == 3 || tempFlag == 6) {
						newsType = 1;
					} else {
						newsType = 2;
					}
				} else if(publicPar.blandlv == 2) { //2是学校牌
					if(tempFlag == 1 || tempFlag == 2 || tempFlag == 3 || tempFlag == 6) {
						newsType = 2;
					} else {
						newsType = 2;
					}
				}
				//握手
				var enData0 = {};
				//不需要加密的数据
				var comData0 = {
					// uuid: publicPar.uuid, //用户设备号
					newstype: flag, //文章种类，0文章列表,1带图片的文章列表,2带详情
					chncode: chncode, //栏目代码，后台栏目定义的代码
					blandid: publicPar.blandid, //班牌对应ID，根据班牌类型填写,学校的填写学校ID,年级牌,填写年级ID,班级牌填写班级ID
					blandlv: publicPar.blandlv, //班牌类型，0是班级班牌,1是年级牌,2是学校牌,控制blandid的值指向
					//					blandid: 20, //班牌对应ID，根据班牌类型填写,学校的填写学校ID,年级牌,填写年级ID,班级牌填写班级ID
					//					blandlv: 1, //班牌类型
					psize: classCardMsg.pageLimit, //每页条数
					pindex: classCardMsg.pageNum, //页码
					newslv: newsType, //文章层级，文章层级,0获取blandlv对应的本层级的文章,1获取向上级别的文章(如年级牌只获取该年级的及学校级别的文章),2获取关联范围的所有文章(如年级,则获取该年级下所有班级及学校级别的及本年级的)
					// utoken: personal.utoken, //用户令牌
					// appid: publicPar.appid //系统所分配的应用ID
				};
				//			events.showWaiting();
				//发送网络请求，data为网络返回值
				postDataEncry(window.storageKeyName.INTERFACE_BANPAI+'api/webSchNews/ClassNewsList', enData0, comData0, 1, function(data) {
					console.log('2121212tempFlag:' + JSON.stringify(data));
					if(data.code == 0) {
						//						if(tempFlag == 1) {
						var dataL = data.data.newslist;
						if(dataL != null) {
							for(var i = 0; i < data.data.newslist.length; i++) {
								var tempModel = data.data.newslist[i];
								if(tempModel.newsid == curPage.newsid) {
									classCardMsg.currentModel = tempModel;
									break;
								}
								if(curPage.newsid == -1) {
									classCardMsg.currentModel = tempModel;
									break;
								}
							}
							// console.log("******************我给VUE赋值了**********************")
							classCardMsg.totalCount = data.data.pg.RowCount;
							classCardMsg.totalPage = data.data.pg.PageCount;
							classCardMsg.cardMsgList1 = data.data;
							if(canInit) {
								canInit = false;
								initLayuiPage()
							}
						}
						//						}
					} else {

					}
				});
			}
			var classCardMsg = new Vue({
				el: "#classCardMsg",
				data: {
					cardMsgList1: {},
					weatherModel: {},
					timeModel: {},
					currentModel: {},
					pageNum: 1, //当前页
					pageLimit: 10, //每页显示条数
					totalCount: 0, //总条数
					totalPage: 1 //总页数
				},
				methods: {
					clickLi: function(model) {
						classCardMsg.currentModel = model;
					}
				},
				watch: {
					currentModel: function(newVal, oldVal) {
						//alert('监视到了firstname的变化'+JSON.stringify(newVal)+JSON.stringify(oldVal));

						setTimeout(function() {
							test();
						}, 1 * 1000);
					}
				}
			});

			function initLayuiPage() {
				// console.log("******************我初始化了**********************")
				layui.use(['laypage', 'layer'], function() {
					var laypage = layui.laypage,
						layer = layui.layer;
					laypage.render({
						elem: 'demo1',
						count: classCardMsg.totalCount //数据总数
							,
						layout: ['prev', 'next'],
						jump: function(obj, first) {
							if(!first) {
								classCardMsg.pageNum = obj.curr;
								getlist(2, curPage.chncode, classCardMsg.pageLimit, 1);
							}
						}
					});
				});
			}

			var videos;

			function test() {
				videos = document.getElementsByTagName('video');
				//alert(videos.length);
				for(var i = videos.length - 1; i >= 0; i--) {
					(function() {
						var p = i;
						videos[p].addEventListener('play', function() {
							pauseAll(p);
						})
					})()
				}
			}

			function pauseAll(index) {
				for(var j = videos.length - 1; j >= 0; j--) {
					if(j != index) videos[j].pause();
				}
			};

			function getDetail() {
				var publicPar = store.get(window.storageKeyName.PUBLICPARAMETER);
				// console.log('publicPar:' + JSON.stringify(publicPar));
				var personal = store.get(window.storageKeyName.PERSONALINFO);
				// console.log('personal0002:' + JSON.stringify(personal));
				//握手
				var enData0 = {};
				//不需要加密的数据
				var comData0 = {
					uuid: publicPar.uuid, //用户设备号
					newsid: 1, //文章种类，0文章列表,1带图片的文章列表
					utoken: personal.utoken, //用户令牌
					appid: publicPar.appid //系统所分配的应用ID
				};
				//			events.showWaiting();
				//发送网络请求，data为网络返回值
				postDataEncry('ClassNews', enData0, comData0, 0, function(data) {
					// console.log('2121212');
					if(data.code == 0) {} else {

					}
				});
			}

			function getTime() {
				var date = new Date(); //创建对象  
				var y = date.getFullYear(); //获取年份  
				var m = date.getMonth() + 1; //获取月份  返回0-11  
				var d = date.getDate(); // 获取日  
				var w = date.getDay(); //获取星期几  返回0-6   (0=星期天) 
				var ww = ' 星期' + '日一二三四五六'.charAt(new Date().getDay()); //星期几
				var h = date.getHours(); //时
				var minute = date.getMinutes() //分
				var s = date.getSeconds(); //秒
				var sss = date.getMilliseconds(); //毫秒
				if(m < 10) {
					m = "0" + m;
				}
				if(d < 10) {
					d = "0" + d;
				}
				if(h < 10) {
					h = "0" + h;
				}
				if(minute < 10) {
					minute = "0" + minute;
				}
				if(s < 10) {
					s = "0" + s;
				}
				if(sss < 10) {
					sss = "00" + sss;
				} else if(sss < 100) {
					sss = "0" + sss;
				}
				var tmpModel = {
					yearStr: y + "-" + m + "-" + d + "",
					weekStr: ww,
					hoursStr: h + ":" + minute + ":" + s
				}
				classCardMsg.timeModel = tmpModel;
			}
		</script>
	</body>

</html>